<template>
  <div
    id="sidenav-collapse-main"
    class="w-auto h-auto collapse navbar-collapse max-height-vh-100 h-100 sidenavList"
  >
    <ul class="navbar-nav">
      <li class="nav-item">
        <sidenav-collapse
          collapse-ref="/projects"
          nav-text="Projects"
          :class="getRoute() === 'dashboards' ? 'active' : ''"
          :collapse="false"
        >
          <template #icon>
            <Shop />
          </template>
        </sidenav-collapse>
      </li>
      <li class="nav-item">
        <sidenav-collapse
          collapse-ref="/favorites"
          nav-text="favorites"
          :class="getRoute() === 'pages' ? 'active' : ''"
          :collapse="false"
        >
          <template #icon>
            <Office />
          </template>
          <!-- <template #list>
            <ul class="nav ms-4 ps-3">
              <sidenav-collapse-item
                refer="profileExample"
                mini-icon="P"
                text="Profile"
              >
                <template #nav-child-item>
                  <sidenav-item
                    :to="{ name: 'Profile Overview' }"
                    mini-icon="P"
                    text="Profile Overview"
                  />
                </template>
              </sidenav-collapse-item>
            </ul>
          </template> -->
        </sidenav-collapse>
      </li>

      <li class="nav-item">
        <sidenav-collapse
          collapse-ref="/premium"
          nav-text="Premium"
          :class="getRoute() === 'applications' ? 'active' : ''"
          :collapse="false"
        >
          <template #icon>
            <Settings />
          </template>
        </sidenav-collapse>
      </li>

      <li class="nav-item">
        <sidenav-collapse
          collapse-ref="/notifications"
          nav-text="Notifications"
          :class="getRoute() === 'ecommerce' ? 'active' : ''"
          :collapse="false"
        >
          <template #icon>
            <Basket />
          </template>
        </sidenav-collapse>
      </li>
      <li class="mt-3 nav-item">
        <hr class="mt-0 horizontal dark" />
        <h6
          class="text-xs ps-4 ms-2 font-weight-bolder opacity-6"
          :class="isRTL ? 'me-4' : 'ms-2'"
        >
          Connect
        </h6>
      </li>
      <li v-for="(item, index) in ConnectList" :key="index" class="nav-item">
        <CustomSidenavCollapse :nav-text="item.name">
          <template #icon>
            <img :src="item.icon" class="" style="width: 20px; height: 20px;"/>
          </template>
        </CustomSidenavCollapse>
      </li>
    </ul>
  </div>
  <div class="pt-3 mx-3 mt-3 sidenav-footer">
    <sidenav-card
      :class="cardBg"
      text-primary="Free Plan"
      text-secondary="Click the button below to upgrade your plan"
      route="https://www.creative-tim.com/learning-lab/vue/overview/soft-ui-dashboard/"
      label="Upgrade"
      icon="ni ni-diamond"
    />
  </div>
</template>
<script>
// import SidenavItem from "./SidenavItem.vue";
import SidenavCollapse from "./SidenavCollapse.vue";
import CustomSidenavCollapse from "./CustomSidenavCollapse.vue";
import SidenavCard from "./SidenavCard.vue";
// import SidenavCollapseItem from "./SidenavCollapseItem.vue";
import Settings from "../../components/Icon/Settings.vue";
import Basket from "../../components/Icon/Basket.vue";
// import Box3d from "../../components/Icon/Box3d.vue";
import Shop from "../../components/Icon/Shop.vue";
import Office from "../../components/Icon/Office.vue";
// import Document from "../../components/Icon/Document.vue";
// import Spaceship from "../../components/Icon/Spaceship.vue";
// import CreditCard from "../../components/Icon/CreditCard.vue";

import metamask from "@/assets/icon/MetaMaskIcon.png"
import metamaskBind from "@/assets/icon/MetaMaskIcon_bind.png"
import telegramIcon from "@/assets/icon/telegramIcon.png"
import telegramIconBind from "@/assets/icon/telegramIcon_bind.png"
import mailIcon from "@/assets/icon/mailIcon.png"
import mailIconBind from "@/assets/icon/mailIcon_bind.png"
import notificationIcon from "@/assets/icon/notificationIcon.png"
import notificationIconBind from "@/assets/icon/notificationIcon_bind.png"
import { mapState } from "vuex";
export default {
  name: "SidenavList",
  components: {
    // SidenavItem,
    SidenavCollapse,
    SidenavCard,
    // SidenavCollapseItem,
    Settings,
    Basket,
    // Box3d,
    Shop,
    Office,
    // Document,
    // Spaceship,
    // CreditCard,
    CustomSidenavCollapse,
  },
  props: {
    cardBg: {
      type: String,
      default: "",
    },
  },
  
  computed: {
    ...mapState(["isRTL"]),
    ...mapState('app', ["account"]),
    ConnectList(){
      return [
        {
          name: this.account.address ? this.account.address : "Metamask",
          icon: this.account.address ? metamaskBind : metamask,
          icon_bind: metamaskBind
        },
        {
          name: this.account.nickname ? this.account.nickname : "Telegram",
          icon: this.account.nickname ? telegramIconBind : telegramIcon,
          icon_bind: telegramIconBind
        },
        {
          name: this.account.email ? this.account.email : "E-mail",
          icon: this.account.email ? mailIconBind : mailIcon,
          icon_bind: mailIconBind
        },
        {
          name: "Notifications",
          icon: this.account.notify ? notificationIconBind : notificationIcon,
          icon_bind: notificationIconBind
        },
      ]
    }
  },
  methods: {
    getRoute() {
      const routeArr = this.$route.path.split("/");
      return routeArr[1];
    },
  },
};
</script>
<style>
#sidenav-collapse-main::-webkit-scrollbar {
  display: none;
}
</style>
